import "../views/Home.css"
import router from "../router"
import { useNavigate, useParams, useLocation } from "react-router-dom"
import { Routes, Route } from "react-router-dom"
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import React, {Component } from 'react';
const { Header, Content, Sider } = Layout;

function withRouter(Ss) {
  return (props) => (
    <Ss
      {...props}
      params={useParams()}
      location={useLocation()}
      navigate={useNavigate()}
    />
  )
}

function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label
  };
}

const items = [
  getItem('起始页', 'sub1', <MailOutlined />, [
    getItem('后台首页', '/shoye'),
  ],),
  getItem('舆情报告', 'sub2', <MailOutlined />, [
    getItem('全部舆情', '/one'),
    getItem('正面舆情', '/two'),
    getItem('负面舆情', '/three'),
  ]),
  getItem('舆情设置', 'sub3', <AppstoreOutlined />, [
    getItem('舆情关键词设置', '/one1'),
    getItem('舆情报警设置', '/two1'),
  ]),
];




class Home extends Component{
  constructor(){
    super()
    this.state={
      collapsed:false
    }
  }
  setCollapsed=(e)=>{
    this.setState({
      collapsed:e
    })
  }
  myFn = (e) => {
    this.props.navigate(e.key)
  }
  render(){
    return (
      <Layout
        style={{
          minHeight: '100vh',
        }}
      >
        <Sider collapsible collapsed={this.state.collapsed} onCollapse={(value) => this.setCollapsed(value)}>
          <div className="logo" />
          <Menu theme="dark"  defaultSelectedKeys={['1']} mode="inline" items={items} onSelect={(e) => this.myFn(e)} />
        </Sider>
        <Layout className="site-layout">
          <Header
            className="site-layout-background"
            style={{
              padding: 0,
            }}
          />
          <Content
            style={{
              margin: '0 16px',
            }}
          >
            <Breadcrumb
              style={{
                margin: '16px 0',
              }}
            />
            <div
              className="site-layout-background"
              style={{
                padding: 24,
                minHeight: 360,
              }}
            >
              <Routes>
                {
                  router.map((e, i) => {
                    if (!e.children) {
                      return false
                    } else {
                      return e.children.map((ee, ii) => {
                        return <Route path={ee.path} element={ee.element} key={i}></Route>
                      })
                    }
                  })
                }
              </Routes>
            </div>
          </Content>
        </Layout>
      </Layout>
    )
  }
}

// const Home = () => {
//   const [openKeys, setOpenKeys] = useState(['sub1']);
//   const onOpenChange = (keys) => {
//     const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1)
//     if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
//       setOpenKeys(keys);
//     } else {
//       setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
//     }
//   }
//   const [collapsed, setCollapsed] = useState(false);
//   return (
//     <Layout
//       style={{
//         minHeight: '100vh',
//       }}
//     >
//       <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
//         <div className="logo" />
//         <Menu theme="dark" openKeys={openKeys} onOpenChange={onOpenChange} defaultSelectedKeys={['1']} mode="inline" items={items} onSelect={(e)=>this.myFn(e)} />
//       </Sider>
//       <Layout className="site-layout">
//         <Header
//           className="site-layout-background"
//           style={{
//             padding: 0,
//           }}
//         />
//         <Content
//           style={{
//             margin: '0 16px',
//           }}
//         >
//           <Breadcrumb
//             style={{
//               margin: '16px 0',
//             }}
//           />
//           <div
//             className="site-layout-background"
//             style={{
//               padding: 24,
//               minHeight: 360,
//             }}
//           >
//               <Routes>
//                 {
//                   router.map((e, i) => {
//                     if (!e.children) {
//                       return false
//                     } else {
//                       return e.children.map((ee, ii) => {
//                         return <Route path={ee.path} element={ee.element} key={i}></Route>
//                       })
//                     }
//                   })
//                 }
//               </Routes>
//           </div>
//         </Content>
//       </Layout>
//     </Layout>
//   )
// };

export default withRouter(Home);
